<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>DojoX Analytics Gesture Test</title>
		<style type="text/css">
			@import "../../mobile/themes/iphone/base.css";
			@import "../../mobile/themes/iphone/TabBar.css";
			#outerHeading {
				height: 240px;
			}
			#outer {
				width: 100%;
				height: 240px;
				border: 1px solid #54A201;
				background-color: #54A201;
			}
			#inner {
				width: 250px;
				height: 110px;
				border: 1px solid #7FB0DB;
				background-color: #7FB0DB
			}
			#log1, #log2 {
				width: 100%;
				height: 50px;
			}
		</style>
		<script src="../../../dojo/dojo.js"
			data-dojo-config="parseOnLoad:true, async:true, isDebug: true, usePlainJson: true,
				sendMethod: 'script', sendInterval: 5000, mblAlwaysHideAddressBar: true,
				// the line below can be used to override the swipeSampleDelay, targetProps and textContentMaxChars
				//swipeSampleDelay : 500, targetProps : ['id','className'], textContentMaxChars : 12
				analyticsUrl: 'http://dojotoolkit.org/~dmachi/dojo-1.0/dojox/analytics/logger/dojoxAnalytics.php'">
		</script>


		<script>
			require([
				"dojo/ready",
				"dojo/parser",
				"dojox/mobile",			// This is a mobile app.
				"dojox/mobile/ScrollableView",
				"dojox/mobile/compat", // This mobile app supports running on desktop browsers
				"dojox/analytics",
				// this plugin returns the information dojo collects when it launches
				"dojox/analytics/plugins/dojo",
				// this plugin return the information the window has when it launches
				// and it also ties to a few events such as window.option
				"dojox/analytics/plugins/window",
				// this plugin tracks console. message, It logs console.error, warn, and
				// info messages to the tracker.  It also defines console.rlog() which
				// can be used to log only to the server.  Note that if isDebug() is disabled
				// you will still see the console messages on the sever, but not in the actual
				// browser console.
				"dojox/analytics/plugins/consoleMessages",
				// tracks where a dojox.gesture.tap and swipe events
				"dojox/analytics/plugins/gestureEvents",
				"dojox/analytics/plugins/idle",
				"dojox/gesture/tap",
				"dojox/gesture/swipe",
				"dojo/_base/html",
				"dojo/dom",
				"dojo/touch",
				"dojo/on",
				"dojo/_base/window",
				"dojo/has",
				"dojo/dom-style",
				"dojox/mobile/Heading"
			], function(ready, parser, mobile, scrollableView, compat,
				analytics, dojoplugin, windowplugin, consolemsgplugin,
				gestureplugin, idleplugin, tap, swipe,
				html, dom, touch, on, win, has, domStyle){

				ready(function(){
					var action = function(e){
						dom.byId("log1").innerHTML = "";
						var info = " e.target.id=" + e.target.id + " | e.type=" + e.type +
							" | e.currentTarget.id="+ e.currentTarget.id;
						dom.byId("log1").innerHTML += info;
					};

					var swipeAction = function(e){
						dom.byId("log2").innerHTML = "";
						var info =  " e.target.id=" + e.target.id + " | e.type=" + e.type +
							" | e.currentTarget.id="+ e.currentTarget.id +
							" e.dx=" + e.dx + " e.dy=" + e.dy + " e.time=" + e.time + "<br/>";
						dom.byId("log2").innerHTML += info;
					};

					var action2 = function(e){
						dom.byId("log").innerHTML = "";
						var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>";
						if(e["target"]){
						   info += "target.textContent: " + e["target"]["textContent"] + "<br/>";
						}
						for(var i in e){
						  if(i == "touches" || i == "targetTouches" || i == "changedTouches"){
							info += i + ": " + e[i].length + "<br/>";
						  }else{
							if(typeof e[i] != "function"){
							  info += " " + i + ": " + e[i] + "<br/>";
							}
						  }
						}
						dom.byId("log").innerHTML += info + "<br/>";
					};

					//tap and swipe gestures both work well both on PC and touch devices
					var inner = dom.byId("inner");
					on(inner, tap, action);
					on(inner, tap.hold, action);
					on(inner, tap.doubletap, action);
					on(inner, swipe, swipeAction);

					//test gesture events bubbling from inner div
					var outer = dom.byId("outer");
					on(outer, tap, action);
					on(outer, tap.hold, action);
					on(outer, tap.doubletap, action);
					on(outer, swipe, swipeAction);
					on(outer, swipe.end, swipeAction);

					// Event info, uncomment one of the lines below to see what these events return
					//on(outer, tap, action2);
					//on(outer, tap.hold, action2);
					on(inner, tap.doubletap, action2);
					//on(inner, swipe, action2);
					on(outer, swipe.end, action2);
					//on(outer, touch.move, action2);
					//on(outer, touch.press, action2);
					//on(inner, touch.release, action2);


					on(win.doc, "orientationchange", function(e){
						dom.byId("log1").innerHTML="";
						dom.byId("log2").innerHTML="";
						dom.byId("log").innerHTML="";
					});
				});
			});
		</script>
	</head>
	<body style="visibility:hidden;">
		<div id="categ" dojoType="dojox/mobile/ScrollableView"  selected="true">
 			<div id="outerHeading" dojoType="dojox/mobile/Heading" fixed="top">
				<div id="outer">
					outer content <div id="inner">inner content</div>
				</div>
			</div>
			<div id="log1"></div>
			<hr/>
			<div id="log2"></div>
			<hr/>
			<div id="log"></div>

		</div>
	</body>
</html>
